<template>
	<view class="goodlist" v-if="dataBuffer">
		<!-- head区域 -->
		<view class="head">
			<view class="search">
				<u-search :disabled="true" @click="goSearch" shape="square" :show-action="true" action-text="搜索"
					:animation="true" margin="10rpx 0rpx">
				</u-search>
			</view>
			<view class="sortbox">
				<view class="sort">
					<view hover-class="touchOpacity">综合排序</view>
					<view hover-class="touchOpacity">销量</view>
					<view hover-class="touchOpacity" @click="pricesort">
						<text>价格</text>
						<image src="../../static/icon/sort.png"></image>
					</view>
					<view hover-class="touchOpacity">好评度</view>
					<view hover-class="touchOpacity">店铺</view>
				</view>
				<view class="filter" hover-class="touchOpacity">
					<image src="../../static/icon/filter.png"></image>
					<text>筛选</text>
				</view>
			</view>

		</view>

		<!-- 提示标语区域 -->
		<view class="biaoyu" hover-class="touchOpacity">
			<u-notice-bar mode="vertical" :list="list" :show="true" :close-icon="true"></u-notice-bar>
		</view>

		<!-- 商品列表区域 -->
		<view class="list">
			<view class="row" @click="toDetail(item.id)" v-for="(item,index) in goodlist" :key="index">
				<!-- 执行图片赖加载 此处注意百度小程序问题需要指定固定高度-->
				<view class="image">
					<u-lazy-load :key="index" :image="item.img" height="218"></u-lazy-load>
				</view>
				<view class="info" hover-class="touchOpacity">
					<text>{{item.goodsname}}</text>
					<view class="money">
						<text>￥ 200</text> <text>￥210</text>
					</view>
					<text>双11.11限制200起</text>
					<text space="ensp">3565评论 99%好评</text>
				</view>
			</view>
		</view>

		<!-- 底部悬浮球 -->
		<view v-if="topBuffer" class="quick_top" hover-class="touchOpacity">
			<image src="../../static/icon/totop.png"></image>
		</view>
	</view>
	<view v-else>
		<!-- 无数据提示 -->
		<u-empty text="暂无数据~~去逛逛~~" mode="list" :show="!dataBuffer" color="orange" icon-color="orange"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				size: 20, // 每页显示几条
				page: 1, // 当前页数
				value2: '',
				list: [
					'筛选11.11大促商品,亲,请速速赶来',
					'筛选11.11大促商品,亲,请速速赶来',
				],
				show: false,
				mode: 'right',
				mask: true, // 是否显示遮罩
				closeable: true,
				closeIconPos: 'top-right',
				topBuffer: false, //控制悬浮球显示
				dataBuffer: false,
				goodlist: [] // 商品列表数据
			}
		},
		onLoad(option) {
			let data = {
				cateid: option.cateid, // 分类id值
				type: option.type, // 分类类型
				size: this.size,
				page: this.page,
			}

			if (option === {}) {
				this.dataBuffer = false;
			} else {
				this.$http({
					url: '/api/getgoodlist',
					data,
				}).then(res => {
					if (res.data.code === 200) {
						if (res.data.list.goodData === null) {
							this.dataBuffer = false;
							return;
						}
						// 是否显示空组件 true:显示 false:不显示
						this.dataBuffer = true;

						// 处理图片路径
						res.data.list.goodData.forEach(item => {
							item.img = this.$pregImg + item.img
						})
						this.goodlist = res.data.list.goodData;
					}
				})
			}
		},
		methods: {
			// 路由跳转到详情
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/gooddesc/gooddesc?id=${id}`,
				})
			},
			// 跳转到搜索页面
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/search",
				})
			},

			// 价格筛选事件
			pricesort() {
				uni.showActionSheet({
					itemList: ['升序', '降序']
				})
			},
		}


	}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/goodlist.css");
</style>